<template>
	<div class="container">
		<Category title="美食" :listData="foods">
			<img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
		</Category>
		<Category title="游戏" :listData="games">
			<ul>
				<li v-for="(g,index) in games" :key="index">{{g}}</li>
			</ul>
		</Category>
		<Category title="电影" :listData="films">
			<video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
		</Category>
	</div>
</template>

<script>
	import Category from './components/Category.vue'
	export default {
		name:'App',
		components:{Category},
		data(){
			return{
				foods:['火锅','1','11','111'],
				games:['2','22','222','2222'],
				films:['3','33','333','3333']
			}
		}
	}
</script>

<style scoped>
	.container{
		display: flex;
		justify-content: space-around;
	}

	img{
		width: 100%;
	}

	video{
		width: 100%;
	}
</style>